<template>
  <div class="recommend">
    <van-icon name="star" />
    <div class="recommend-title">定制师推荐</div>
    <div class="recommend-sub">100+专业定制师，为你挖掘更地道有趣的local玩法。</div>
    <div class="recommend-good">
      <div class="left">
        <router-link to="/tourMdetails/99">
          <van-image src="https://www.uniqueway.com/mix/mip/images/mall/customizer-card.jpg" />
          <div class="text">
            <div class="today">TODAY</div>
            <div class="title">网红打卡地</div>
            <div class="sub-title">揭开土耳其神秘面纱</div>
          </div>
        </router-link>
      </div>
      <div class="right">
        <router-link to="/tourMdetails/91">
          <van-image src="https://www.uniqueway.com/mix/mip/images/mall/customizer-nation.jpg"></van-image>
          <div class="top-text">
            <div class="title">欧洲去哪玩</div>
            <div class="sub-title">10种玩法,不一样的法意瑞</div>
          </div>
        </router-link>
        <div class="bottom">
          <router-link to="/tourMdetails/3">
            <van-image class="bottom-left" src="https://www.uniqueway.com/mix/mip/images/mall/customizer-cherry.png"></van-image>
            <div class="location">日本</div>
            <div class="location japen">樱花季</div>
          </router-link>
          <router-link to="/tourMdetails/100">
            <van-image class="bottom-right" src="https://www.uniqueway.com/mix/mip/images/mall/customizer-aurora.jpg"></van-image>
            <div class="location europe">北欧极光</div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.recommend {
  padding: 20px 16px 0px 16px;

  .van-icon-star {
    float: left;
    font-size: 0.6rem;
  }

  .recommend-title {
    height: 24px;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    color: #544641;
  }

  .recommend-sub {
    padding-top: 8px;
    height: 12px;
    font-size: 12px;
    line-height: 1;
    color: #948e8c;
  }

  .recommend-good {
    padding: 16px 0 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;

    img {
      border-radius: 4px;
    }

    .left {
      padding-right: 4px;

      .text {
        position: absolute;
        color: #fff;
        margin-top: -65px;
        padding-left: 8px;

        .today,
        .title,
        .sub-title {
          padding-bottom: 2px;
          color: #fff;
          font-weight: 900;
        }

        .today {
          width: 49px;
          font-size: 14px;
          font-style: oblique;
          line-height: 1;
          letter-spacing: 0;
        }

        .title {
          width: 100px;
          font-size: 20px;
          line-height: 1.2;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .sub-title {
          width: 23vh;
          font-size: 12px;
          font-weight: normal;
          line-height: 1.5;
        }
      }
    }

    .right {
      .top-text {
        .title,
        .sub-title {
          position: absolute;
          padding-left: 8px;
          line-height: 1.5;
          color: #fff;
        }

        .title {
          margin-top: -43px;
          font-size: 16px;
          font-weight: 900;
        }

        .sub-title {
          margin-top: -23px;
          padding-bottom: 2px;
          font-size: 12px;
        }
      }

      .bottom {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;

        .bottom-left {
          padding-right: 1px;
        }

        .location {
          position: relative;
          bottom: 45px;
          padding-left: 6px;
          font-size: 16px;
          font-weight: 900;
          line-height: 1.13;
          color: #fff;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

          &.japen {
            bottom: 43px;
          }

          &.europe {
            bottom: 25px;
          }
        }

        .bottom-right {
          padding-left: 1px;
        }
      }
    }
  }
}
</style>
